<template>
    <div class="phone-page">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :pager-count="5"
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name:'PhonePage',
    props:['pageNum','pageSize','total'],
    data() {
        return {
            pc_pageNum:this.pageNum,
            pc_pageSize:this.pageSize
        }
    },
    methods: {
        handleSizeChange(val) 
        {
            console.log(`每页 ${val} 条`);
            this.pc_pageSize = val //赋值给长度，防止数量不平衡
            this.$parent.callPage(this.pc_pageNum,val) //调用父类方法
        },
        handleCurrentChange(val) 
        {
            console.log('初始数据:',this.pageNum,this.pageSize);
            console.log(`当前页: ${val}`);
            this.pc_pageNum = val //赋值给页数，防止数量不平衡
            this.$parent.callPage(val,this.pc_pageSize) //调用父类方法
        },
    }
}
</script>

<style lang="less" scoped>
    @media all and (min-width: 540px)
    {
        .el-pagination
        {
            display: none;
        }
    }

    .el-pagination
    {
        text-align: center;
    }
</style>